<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":"
            + request.getServerPort() + path + "/";
%>
<!DOCTYPE HTML>
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />

    <link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css" />
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css" />
    <link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin" />
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css" />
    <link rel="stylesheet" type="text/css" href="lib/zTree/v3/css/zTreeStyle/zTreeStyle.css" />
    <title>添加角色</title>
</head>
<body>
<article class="page-container">
    <form class="form form-horizontal" action="${empty role ? 'role/insert':'role/update'}" method="post" id="form-admin-add">

        <input type="hidden" ${not empty role?'':'disabled'} value="${role.roleId}" id="roleId" name="roleId">

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>角色名称：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="${role.rolename}" placeholder="角色名称" id="rolename" name="rolename">
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">角色描述：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <textarea name="remark" class="textarea"  placeholder="说点什么...100个字符以内" dragonfly="true">${role.remark}</textarea>
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">角色权限：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="hidden" value="" name="permissionIds" id="permissionIds">
                <ul id="permissionTree" class="ztree"></ul>
            </div>
        </div>

        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;${empty role ?'添加':'修改'}&nbsp;&nbsp;">
            </div>
        </div>
    </form>
</article>

<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script type="text/javascript" src="lib/zTree/v3/js/jquery.ztree.all.min.js"></script>
<script type="text/javascript">

    $(function(){
       var  treeObj=$.fn.zTree.init($("#permissionTree"), setting);
        $("#form-admin-add").validate({
            rules:{
                rolename:{
                    required:true,
                    remote: {
                        url: "role/checkRoleName",
                        type: "post",
                        dataType: "json",
                        data: {
                            rolename: function() {
                                return $("#rolename").val();
                            },
                            roleId:function () {
                                var id=null;
                                if ($("#roleId").val()!=undefined){
                                    id=$("#roleId").val();
                                }
                                return id;
                            }
                        }
                    }
                }
            },
            messages:{
                rolename:{
                    required:"名称不能为空",
                    remote:"该角色已存在,请重新输入"
                }
            },
            submitHandler:function(form){
                var nodes=treeObj.getCheckedNodes(true);
                if (nodes.length==0){
                    layer.msg("角色权限不能为空",{icon:5,time:1000});
                    return;
                }
                var idArray=[];
                for (var i = 0; i < nodes.length; i++) {
                    idArray.push(nodes[i].permissionId);
                }
                var permissionIds=idArray.toString();
                $("#permissionIds").val(permissionIds);
                $(form).ajaxSubmit(function(res){
                    layer.msg(res.msg,{icon:res.code,time:1000},function () {
                        if (1==res.code){
                            parent.refreshTable();
                            parent.layer.closeAll();
                        }
                    });
                });
            }
        })
    });

    var setting = {
        check:{
            enable:true,
            chkStyle:'checkbox'
        },
        view:{
            showLine:false,
            dbClickExpand:true
        },
        data:{
            simpleData:{
                enable:true,
                idKey:"permissionId",
                pIdKey:"parentId"
            }
        },
        async:{
            enable:true,
            type:"post",
            url:"permission/permissionData",
            contentType:"application/json",
            dataFilter: filterMethod
        },
        callback:{
            onAsyncSuccess: zTreeOnAsyncSuccess
        }
    };
    
    function filterMethod(treeId, parentNode, responseData) {
        for (var i = 0; i < responseData.length; i++) {
            responseData[i].open=true;
        }
        return responseData;
    }

    function zTreeOnAsyncSuccess() {
        var idsMsg="${role.permissionIds}";
        var ids=idsMsg.split(",");
        var treeObj=$.fn.zTree.getZTreeObj("permissionTree");
        for (var i = 0; i < ids.length; i++) {
            var node=treeObj.getNodeByParam("permissionId",ids[i]);
            if (node!=null){
                treeObj.checkNode(node,true,false);
            }
        }
    }

</script>
</body>
</html>